<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page session="true"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/css/jquery.mobile-1.4.2.css?v=0.2.14">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/css/app.css?v=0.2.11">
<script
	src="${pageContext.request.contextPath}/resources/js/jquery-1.11.0.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery.mobile-1.4.2.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery.validate.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/additional-methods.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/validations.js?v=0.2.11"></script>
<script type="text/javascript">
	$(window).on('pageinit', function() {

		$(".presente input[type='text']").textinput('disable');
		$(".presente input[type='radio']").checkboxradio('disable');
		$("#finalizar").validate({
			rules : {
				"time" : {
					required : true,
				}
			},
			messages : {

				"time" : {
					required : "La hora es requerida"
				},
			}
		});
		$("#preguntar").validate({
			rules : {
				"respuesta" : {
					required : true,
				},
			},
			messages : {

				"respuesta" : {
					required : "Este campo es requerido"
				},

			},
		});
	});
	function toggle(value) {
		if (value == "true") {
			$(".presente").show();
			$(".oferta").show();
			$(".presente input[type='text']").textinput('enable');
			$(".presente input[type='radio']").checkboxradio('enable');
			$(".oferta input[type='text']").textinput('enable');

		} else {
			$(".presente").hide();
			$(".oferta").hide();
			$(".presente input[type='text']").textinput('disable');
			$(".presente input[type='radio']").checkboxradio('disable');
			$(".oferta input[type='text']").textinput('disable');

		}

	}
	$(function() {
		$("#").validate({
			rules : {
				"time" : {
					required : true
				}
			},
			messages : {
				"time" : {
					required : "Este campo es requerido"
				}

			},
		});
	});
</script>
<style>
.error {
	font-family: calibri;
	font-size: 18px;
	color: red;
	font-size: 18px;
}
</style>
<title>Finalizar Visita</title>
</head>


<div data-role="page" data-ajax="false" data-theme="a">
	<div data-role="header">
		<h1>Datos de la visita</h1>
	</div>
	<div role="main" class="ui.content">
		<div class="centered-content">
			<h2>Ingrese los datos para finalizar la visita</h2>


			<table class="outputTable">
				<tr>
					<td>Número de la Propiedad :</td>
					<td>${visita.propiedad.numero}</td>
				</tr>
				<tr>
					<td>Dirección :</td>
					<td>${visita.propiedad.direccion}</td>
				</tr>
			</table>
			<h2>Preguntas frecuentes realizadas anteriormente</h2>
			<table class="outputTable fmt2">

				<tr>
					<th>Cliente</th>
					<th>Pregunta</th>
					<th>Respuesta</th>
				</tr>
				<c:forEach items="${pregutas}" var="pregunta">

					<tr>
						<td align="left">${pregunta.visita.cliente.nombre}</td>
						<td>${pregunta.pregunta}</td>
						<td>${pregunta.respuesta}</td>
					</tr>
				</c:forEach>
			</table>
			<br />
			<h2>Registrar Pregunta Frecuente</h2>
			<form method="POST"
				action="${pageContext.request.contextPath}/crear_pregunta"
				id="preguntar">
				<input type="hidden" name="idVisita" value="${idVisita}" /> <input
					type="hidden" value="${origen}" name="origen" />
				<table>
					<tr>
						<td><select name="pregunta">
								<c:forEach items="${preguntasFrecuentes}" var="pregunta">
									<option value="${pregunta.pregunta}">${pregunta.pregunta}</option>
								</c:forEach>
						</select></td>
						<td><input name="respuesta" placeholder="Respuesta"></td>
						<td><button type="submit"
								class="ui-btn ui-icon-check ui-btn-icon-plus">Agregar</button></td>
					</tr>


				</table>
			</form>
			<h2>Cerrar Visita</h2>
			<form method="POST" data-ajax="false"
				action="${pageContext.request.contextPath}/finalizar_visita/${idVisita}"
				id="finalizar">
				<input type="hidden" name="idVisita" value="${idVisita}" /> <input
					type="hidden" value="${origen}" name="origen" />
				<table class="outputTable fmt2">
					<tr>
						<td colspan="1">¿Se presentó el cliente a la visita?</td>
						<td>
							<fieldset data-role="controlgroup" data-type="horizontal">
								<input type="radio" id="r1" name="r" value="true"
									onchange="toggle(this.value)" /> <label for="r1">Si</label> <input
									type="radio" id="r2" name="r" value="false"
									onchange="toggle(this.value)" checked="checked" /> <label
									for="r2">No</label>
							</fieldset>
						</td>
					</tr>
					<tr class="presente" style="display: none">
						<td>Hora de llegada del cliente</td>
						<td><input type="time" name="time" step="600" /></td>
					</tr>
					<tr class="presente" style="display: none">
						<td>¿Cuando está pensando en comprar?</td>
						<td><input name="preguntaCompra"></td>
					</tr>
					<tr class="presente" style="display: none">
						<td>¿El cliente enviará una oferta?</td>
						<td><fieldset data-role="controlgroup" data-type="horizontal">
								<input type="radio" name="ofertaRecibida" id="true" value="true"
									checked="checked" /> <label for="true">Si</label> <input
									type="radio" name="ofertaRecibida" id="false" value="false" />
								<label for="false">No</label>
							</fieldset>
					</tr>
					<tr class="presente" style="display: none">
						<td>Monto de la oferta</td>
						<td><input type="text" name="ofertaValor"></td>
					</tr>
					<tr class="presente" style="display: none">


						<td>Nivel de interés del cliente:</td>
						<td>
							<fieldset data-role="controlgroup" data-type="horizontal">
								<input type="radio" name="percepcion" id="percepcion1" value="1"
									checked="checked" /> <label for="percepcion1">Baja</label> <input
									type="radio" name="percepcion" id="percepcion2" value="2" /> <label
									for="percepcion2">Media</label> <input type="radio"
									name="percepcion" id="percepcion3" value="3" /> <label
									for="percepcion3">Alta</label>
							</fieldset>
						</td>
						<!-- <td>
							<fieldset data-role="controlgroup" data-type="horizontal">
								<input type="radio" name="radio-choice-h-2"
									id="radio-choice-h-2a" value="on" checked="checked"> <label
									for="radio-choice-h-2a">Baja</label> <input type="radio"
									name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
								<label for="radio-choice-h-2b">Media</label> <input type="radio"
									name="radio-choice-h-2" id="radio-choice-h-2c" value="other">
								<label for="radio-choice-h-2c">Alta</label>
							</fieldset>
						</td> -->
					</tr>
					<tr class="presente" style="display: none">
						<td>Observaciones del Cliente :</td>
						<td><textarea name="observacionCliente"></textarea></td>
					</tr>
					<tr>
						<td>Observaciones del agente :</td>
						<td><textarea name="observacionAgente"></textarea></td>
					</tr>

					<tr>
						<td><c:if test="${origen==0}">
								<a
									href="${pageContext.request.contextPath}/consultar_visita_pendiente"
									data-ajax="false"
									class="ui-btn ui-icon-delete ui-btn-icon-left">Cancelar</a>

							</c:if> <c:if test="${origen==1}">
								<a href="${pageContext.request.contextPath}/agent_panel"
									data-ajax="false"
									class="ui-btn ui-icon-delete ui-btn-icon-left ui-btn-b">Cancelar</a>
							</c:if></td>
						<td>
							<button type="submit"
								class="ui-btn ui-icon-check ui-btn-icon-right">Finalizar
								registro de visita</button>
						</td>
					</tr>



				</table>

			</form>
		</div>
	</div>
</div>

</body>
</html>